<template>
    <div>
        <Button type="primary" @click="addResource = true">添加资源</Button>
        <Table border  :columns="columns" :data="data" ></Table>
        <Modal
                v-model="addResource"
                title="添加资源"
                @on-ok="ok"
                @on-cancel="cancel">

            <Input v-model="addName" prefix="ios-contact" placeholder="Enter name" style="width: auto" />
            <br>
            <Input v-model="addControl" prefix="ios-lock"  type="text"  placeholder="Enter Control..." style="width: auto" />
        </Modal>
        <Modal
                ID="editResource"
                v-model="editResource"
                title="编辑资源"
                @on-ok="okEdit"
                @on-cancel="cancel">

            <Input v-model="editName" prefix="ios-contact" placeholder="Enter name" style="width: auto" />
            <br>
            <Input v-model="editControl" prefix="ios-lock"  type="text"  placeholder="Enter Control..." style="width: auto" />
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "ResourceComponent",
        data () {
            return {
                columns: [
                    {
                        title:'ID',
                        key:'id'
                    },
                    {
                        title: 'Name',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'name'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title:'控制器',
                        key:'control'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(this);
                                            this.editResource = true;
                                            this.show(params.index);
                                        }
                                    }
                                }, 'Edit'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params);
                                            this.remove(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                data:[],
                addResource: false,
                editResource: false,
                addName:"",
                addControl:"",
                editName:"",
                editControl:"",
                editId:""
            }
        },
        mounted(){
            this.getAll();
        },
        methods: {
            //获取列表
            getAll(){
                axios.get('resource',{
                }).then((response)=> {
                    console.log(response);
                    const  len=response.data.data.length;
                    this.data=response.data.data.slice(0,len);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            ok () {
                //添加
                axios.post('resource',{
                    'name':this.addName,
                    'control':this.addControl
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    setInterval(()=>{
                        this.getAll();
                    },3000)
                }).catch(function (error) {
                    console.log(error);
                });
                //
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            show (index) {
                console.log(this.data[index]);
                this.editName=this.data[index].name;
                this.editControl=this.data[index].control;
                this.editId=this.data[index].id;
            },
            remove (index) {
                const url='resource/'+this.data[index].id;
                axios.delete(url,{
                    data:{'id':this.data[index].id}
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    if(response.data.code===1){
                        //code为1是删除成功
                        this.data.splice(index, 1);
                    }else {}
                }).catch(function (error) {
                    console.log(error);
                });
            },
            okEdit(){
                const url="resource/"+this.editId;
                axios.put(url,{
                    'id':this.editId,
                    'name':this.editName,
                    'control':this.editControl
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    setTimeout(()=>{
                        this.getAll();
                    },1500);
                }).catch(function (error) {
                    console.log(error);

                });
            }
        }
    }
</script>

<style scoped>

</style>